<!DOCTYPE html>
<html lang="en" xmlns:th="http://thyneleaf.org">
<head>
    <meta charset="UTF-8">
    <link rel="StyleSheet" href="../../static/css/jpetstore.css" type="text/css"
          media="screen" />
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #tab{
            text-align: center;
            list-style: none;
        }
        #tab li {
            display: inline-block;
            list-style: none;
            cursor: pointer;
            padding: 0.8ex;
            margin-top: 1.5ex;
            background: #eeedeb no-repeat;
            font: bold 27px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
            color: #f5ba11;
            border-right: 1px solid #bfa986;
            border-bottom: 1px solid #bfa986;
            border-top-left-radius: 50%;
            border-bottom-right-radius: 50%;
        }

        .hide {
            display: none;
        }

    </style>
</head>
<body>
<div th:replace="/common/header"></div>
<ul id="tab">
    <li id="tab1" style="width: 300px">Item Infor</li>
    <li id="tab3" style="width: 300px;display: none">Item Infor</li>
</ul>

<div id="container">
    <form action="/Manager/updateItem" method="post">
        <div id="content1">
            <div id="Catalog">
                <style type="text/css">

                    table {
                        width: 700px;
                        padding: 0;
                        margin: 0;
                    }

                    caption {
                        padding: 0 0 5px 0;
                        width: 700px;
                        font: italic 16px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
                        text-align: right;
                    }
                    th {
                        font: bold 16px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
                        color: #f5ba11;
                        border-right: 1px solid #bfa986;
                        border-bottom: 1px solid #bfa986;
                        border-top: 1px solid #bfa986;
                        letter-spacing: 2px;
                        text-transform: uppercase;
                        text-align: left;
                        padding: 6px 6px 6px 12px;
                        background: #eee0c5 no-repeat;
                    }
                    td {
                        border-right: 1px solid #bfa986;
                        border-bottom: 1px solid #bfa986;
                        background: #fff;
                        font-size:16px;
                        padding: 6px 6px 6px 12px;
                        color: #4f6b72;
                    }

                </style>
                <table>
                    <tr>
                        <td style="background: #eee0c5 no-repeat;">itemId:</td>
                        <td><input type="text"  name="itemId" id = "itemId" th:value="${Item.itemId}">
                        </td>

                    </tr>
                    <tr>
                        <td style="background: #eee0c5 no-repeat;">productId:</td>
                        <td><input id="productId" name="productId" th:value="${Item.productId}"></td>
                    </tr>
                    <tr>
                        <td style="background: #eee0c5 no-repeat;">listPrice:</td>
                        <td><input name="listPrice" id="listPrice" th:value="${Item.listPrice}">
                        </td>
                    </tr>
                    <tr>
                        <td style="background: #eee0c5 no-repeat;">quantity:</td>
                        <td><input type="text"  name="quantity"  id="quantity" th:value="${Item.quantity}"></td>
                    </tr>
                </table>
                <input type="button"  name="newAccount" onclick="nextPage()" value="Next" />
                <script type="text/javascript" src="../js/nextPage.js"></script>
            </div>
        </div>

        <div id="content2" class="hide1">
            <div id="Catalog">
                <table>
                    <tr>
                        <td style="background: #eee0c5 no-repeat;">unitcost:</td>
                        <td><input type="text"  name="unitcost"  id="unitcost" th:value="${Item.unitcost}"></td>
                    </tr>
                    <tr>
                        <td style="background: #eee0c5 no-repeat;">supplier:</td>
                        <td><input type="text"  name="supplier"  id="supplier"  th:value="${Item.supplier}"></td>
                    </tr>
                    <tr>
                        <td style="background: #eee0c5 no-repeat;">status:</td>
                        <td><input type="text" size="40" id="status" name="status" th:value="${Item.status}" maxlength="2"></td>
                    </tr>
                    <tr>
                        <td style="background: #eee0c5 no-repeat;">attribute1:</td>
                        <td><input type="text"  id="attribute1" name="attribute1" th:value="${Item.attribute1}"></td>
                    </tr>
                </table>
                <input type="button" name="return" id="return" onclick="returnPage()" value="Return">
                <script type="text/javascript" src="../js/returnPage.js"></script>
                <input type="submit" name="newItem" value="Add"/>
            </div>
        </div>
    </form>
</div>
<div th:replace="/common/footer"></div>
</body>
</html>